<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var duration=null,counter=null,loading=null;
document.addEventListener( "plusready", function(){
	counter = document.getElementById("counter");
	loading = document.getElementById("loading");
	duration = document.getElementById("duration");
	duration.addEventListener( "touchstart", durationStart, false );
	duration.addEventListener( "touchend", durationEnd, false );
	plus.statistic.eventTrig( "open" );
	plus.statistic.eventStart( "stay" );
}, false );
function statisticBack() {
	plus.statistic.eventEnd( "stay" );
	back();
}
var tc=null,tl=null,count=0;
var ds=null;
function doCounter(){
	loading.style.webkitTransition = "all 0.8s ease-in-out";
	loading.style.borderWidth = "0";
	loading.style.borderColor = "rgba(128,128,128,0.8)";
	tc = setTimeout( function(){
		count++;
		loading.style.webkitTransition = "";
		loading.style.borderWidth = "50px";
		loading.style.borderColor = "rgba(255,255,255,0)";
		counter.innerText = count;
		tl=setTimeout( doCounter, 0 );
	}, 1000 );
}
function durationStart(){
	ds = new Date();
	count = 0;
	counter.innerText = "0";
	counter.style.visibility = "visible";
	doCounter();
	outSet( "按下开始计时：" );
}
function durationEnd(){
	clearTimeout( tc );
	tc = null;
	clearTimeout( tl );
	tl = null;
	loading.style.webkitTransition = "";
	loading.style.borderWidth = "50px";
	loading.style.borderColor = "rgba(255,255,255,0)";
	counter.style.visibility = "hidden";
	var d = (new Date()).getTime()-ds.getTime();
	plus.statistic.eventDuration( "press", d );
	outLine( "您按下的时间为"+d+"ms，后台会将此数据提交到服务器！" );
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
.counter {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    line-height: 100px;
    font-size: 48px;
    visibility: hidden;
}
.loading {
	height: 100px;
	width: 100px;
	border-style:solid;
	position:relative;
	top: -100px;
	display:inline-block;
	box-sizing:border-box;
	border-width:50px;
	border-color:rgba(255,255,255,0);
	border-radius: 50px;
}
		</style>
	</head>
	<body>
		<header id="header">
			<div class="nvbt iback" onclick="statisticBack();"></div>
			<div class="nvtt">Statistic</div>
			<div class="nvbt idoc" onclick="openDoc('Statistic Document','/doc/statistic.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br/>
			<p class="des">应用会在后台统计打开此页面的次数及在此页面停留的时间，目前应用集成的是友盟统计插件，相关统计数据需要登录到<a href="" onclick="plus.runtime.openURL('http://www.umeng.com/');">友盟官网</a>查看。</p>
			<div style="height:100px;">
				<div id="counter" class="counter">0</div>
				<div id="loading" class="loading"></div>
			</div>
			<div id="duration" class="button">统计按下时长</div>
			<br/>
		</div>
		<div id="output">
Statistic模块管理统计功能，用于提供应用内统计的能力，支持统计和分析用户属性和用户行为数据。
		</div>
	</body>
	<script type="text/javascript" src="../js/immersed.js" ></script>
</html>